<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>答卷详情</span>
        <!--<el-button type="danger" size="small" style="float: right;">删除</el-button>-->
      </div>
      <div class="answer">
        <div class="info">
          <div>编号: {{ examineeInfo['id'] }}</div>
          <div>姓名: {{ examineeInfo['name'] }}</div>
          <div>{{ type===1?'部门':'等级' }}: {{ examineeInfo['start_time'] }}</div>
        </div>
        <div class="info">
          <div>手机: {{ examineeInfo['mobile'] }}</div>
          <div>邮箱: {{ examineeInfo['email'] }}</div>
          <div>分组: {{ examineeInfo['examinee_group_name'] }}</div>
        </div>
        <div class="questions">
          <div v-for="(item,index) in questions" :key="index" class="question">
            <div class="title">{{ index+1 }} .&nbsp;&nbsp; {{ item.name }} {{ item.must===1?'':'（选填）' }}</div>
            <el-radio-group v-if="item['type']===1" v-model="item['user_answer'][0]" class="option">
              <div v-for="(option,optionIndex) in item['option']" :key="optionIndex" class="item">
                <el-radio :label="optionIndex" :disabled="item['answer'][0]!==optionIndex">{{ option['label']+'. ' + option['value'] }}</el-radio>
              </div>
            </el-radio-group>
            <el-checkbox-group v-if="item['type']===2" v-model="item['user_answer']" class="option">
              <div v-for="(option,optionIndex) in item['option']" :key="optionIndex" class="item">
                <el-checkbox :label="optionIndex" :disabled="item['answer'][0]!==optionIndex">{{ option['label']+'. ' + option['value'] }}</el-checkbox>
              </div>
            </el-checkbox-group>
            <el-input
              v-if="item['type']===3"
              v-model="item['user_answer']"
              type="textarea"
              rows="5"
              class="option"
              maxlength="500"
              show-word-limit
              disabled/>
            <div v-if="item.type===1" class="answer-box flex-between">
              <div>
                正确答案：
                <label class="answer">{{ item['option'] && item['option'][item['answer'][0]] && item['option'][item['answer'][0]]['label'] }}</label>
              </div>
              <div>
                考生答案：
                <label v-if="item['user_answer'].length>0" :class="arrayEqual(item['answer'], item['user_answer'])?'answer':'wrong'">{{ item['option'][item['user_answer'][0]]['label'] }}</label>
                <label v-else class="wrong">{{ '--' }}</label>
              </div>
              <div>
                分数：{{ arrayEqual(item['answer'], item['user_answer'])?item['fraction']:0 }}
              </div>
            </div>
            <div v-if="item.type===2" class="answer-box flex-between">
              <div>
                正确答案：
                <label v-for="(answer,answerIndex) in item['answer']" :key="answerIndex" class="answer">{{ item['option'] && item['option'][item['answer'][0]] && item['option'][answer]['label'] }}</label>
              </div>
              <div>
                考生答案：
                <label v-for="(answer,answerIndex) in item['user_answer']" :key="answerIndex" :class="arrayEqual(item['answer'], item['user_answer'])?'answer':'wrong'">{{ item['option'][answer]['label'] }}</label>
              </div>
              <div>
                分数：{{ arrayEqual(item['answer'], item['user_answer'])?item['fraction']:0 }}
              </div>
            </div>
            <div v-if="item.type===3" class="answer-box">
              <div>
                正确答案：
                <label class="answer">{{ item['answer'] }}</label>
              </div>
            </div>
            <div class="analysis-box">
              题目解析:
              <div v-html="item['remarks']">item['remarks']</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      uid: '',
      type: '',
      examineeInfo: {},
      questions: []
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.uid = this.$route.query.uid
    this.getAnswerSheetDetails()
    this.getExamineeInfo()
  },
  methods: {
    getExamineeInfo() {
      const url = 'exam/examineeInfo'
      const data = {
        id: this.id,
        uid: this.uid,
        type: this.type
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.examineeInfo = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    getAnswerSheetDetails() {
      const url = 'exam/answerInfo';
      const data = {
        id: this.id
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.questions = res.data;
        // for (let i = 0; i < res.data.length; i++) {
        //   // if (this.questions[i]['type'] === 1) {
        //   //   this.questions[i]['user_answer'] = (this.questions[i]['user_answer'] === '' ? [] : this.questions[i]['user_answer'].split(','));
        //   //   this.questions[i]['answer'] = (this.questions[i]['answer'] === '' ? [] : this.questions[i]['answer'].split(','));
        //   // }
        // }
        // console.log(this.questions);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    toAddQuestionOptions(index) {
      this.answerSheet['question'][index]['options'].push({ value: '' })
    },

    toDeleteQuestionOptions(index, optionsIdx) {
      this.answerSheet['question'][index]['options'].splice(optionsIdx, 1)
    },

    toDeleteQuestion(index) {
      this.answerSheet['question'].splice(index, 1)
    },

    /**
     *  获取系统用户列表
     *  接口:'user/all-list'
     */
    getUsersList() {
      const url = 'user/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.usersList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 判断数组是否相等
    arrayEqual(arr1, arr2) {
      if (arr1 === arr2) {
        return true
      }
      if (arr1.length !== arr2.length) {
        return false
      }
      for (let i = 0; i < arr1.length; ++i) {
        if (arr1[i] !== arr2[i]) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
  }

  .answer {
    .info {
      @include flex-row(center, center);
      font-size: 15px;
      color: $textGray;
      margin-bottom: 30px;
      >div{
        flex: 1;
      }
    }

    .questions {
      padding: 0 20px;
      .question {
        margin-bottom: 20px;

        .title {
          margin-bottom: 20px;
        }

        .option {
          margin-left: 30px;

          .item {
            margin-bottom: 15px;
          }
        }

        .answer-box{
          margin-left: 30px;
          padding: 10px 0;
          border-bottom: 1px solid #f1f2f3;
          color: #b7b7b7;
          .answer{
            color: $panGreen;
          }

          .wrong{
            color: $pink;
          }
        }

        .analysis-box{
          margin-left: 30px;
          padding: 10px 0;
          color: #b7b7b7;
          div{
            margin-top: 10px;
          }
        }
      }
    }
  }

  .btn {
    width: 20%;
    min-width: 160px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
